<script setup lang="ts">
import {ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {page, update} from '@/api/menuorder'
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniPopupDialog from "@/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import {baseUrl} from '@/api/request.ts'

onLoad(()=>{
  triggered.value = true;
  uni.getStorage({
    key:'shopId',
    success: function (res)  {
      if(res.data){
        searchParam.value.shopId = parseInt(res.data);
        getList()
      }
    },
    fail:function (res) {
      getList()
    }
  })
  getList()
})
const searchParam=ref({
  page:1,
  limit:10,
  noContainStatus:'0'
})
const list = ref([])
const total=ref(0)
const getList=()=>{
   page(searchParam.value).then(res=>{
    if (searchParam.value.page > 1){
      list.value=list.value.concat(res.data.list)
    }else{
      list.value=res.data.list;
    }
    total.value=res.data.total;
  });
}
const lower=(e)=>{
  console.log("底部",e)
  if (list.value.length < total.value){
    searchParam.value.page++;
    getList()
  }
}
const triggered=ref(false)

const onPulling=(e)=> {
  triggered.value=true;
}
const onRefresh=()=> {
  triggered.value=true;
  searchParam.value.page=1;
  getList()
  triggered.value = false; // 需要重置
}
const onRestore=()=> {
  triggered.value = false; // 需要重置
}
const onAbort=()=> {
  triggered.value = false; // 需要重置
}

const alertDialog1=ref()
const receiveId=ref()
const msgType=ref()
const beihuoBtn=(id)=>{
  receiveId.value=id
  alertDialog1.value.open()
  msgType.value='success';

}
const dialogConfirm1=()=>{
  let form = {
    id:receiveId.value,
    orderStatus:'2'
  }
  update(form).then(res=>{
    if (res.code == 200){
      searchParam.value.page=1;
      getList();
    }
  })
}

const alertDialog2=ref()
const receiveId2=ref()
const wanchengBtn=(id)=>{
  receiveId2.value=id
  alertDialog2.value.open()
  msgType.value='success';
}
const dialogConfirm2=()=>{
  let form = {
    id:receiveId2.value,
    orderStatus:'3'
  }
  update(form).then(res=>{
    if (res.code == 200){
      searchParam.value.page=1;
      getList();
    }
  })
}
</script>

<template>
<view class="receiveorder">
  <scroll-view scroll-y="true" style="height: 99%;padding-left: 15px;" @scrolltolower="lower"
               refresher-enabled="true"  :refresher-triggered="triggered"
               :refresher-threshold="100" @refresherpulling="onPulling"
               @refresherrefresh="onRefresh" @refresherrestore="onRestore"
               @refresherabort="onAbort">
    <view class="orderinfo" v-for="(item,index) in list" :key="index" :index="index">
      <view class="title">
        <view style="color: cornflowerblue;">
          <text v-if="item.orderType == '0'">堂食</text>
          <text v-if="item.orderType == '1'">打包</text>
          <text v-if="item.orderType == '2'">上门取餐</text>
          <text v-if="item.orderType == '3'">自取</text>
        </view>
        <view style="text-align: right;font-size: 13px;width: 33%;font-weight: bolder">
          <text v-if="item.orderStatus == '1'" style="color: #5A5127;">已付款</text>
          <text v-if="item.orderStatus == '2'" style="color: #675F54;">备货中</text>
          <text v-if="item.orderStatus == '3'" style="color: #D1BF70;">派送中</text>
          <text v-if="item.orderStatus == '4'" style="color: #566B4C">已送达</text>
        </view>
        <button  style="padding-left: 4px;padding-right: 4px;font-size: 10px;"  v-if="item.orderStatus == '1'"
                 size="mini" type="primary" @click="beihuoBtn(item.id)">
          是否接收
        </button>
        <button  style="padding-left: 4px;padding-right: 4px;font-size: 10px;"  v-if="item.orderStatus == '2'"
                 size="mini" type="primary" @click="wanchengBtn(item.id)">
          是否完成
        </button>
        <text v-if="item.orderType == '0' || item.orderType == '1'">{{item.tableNumber}}号桌</text>
      </view>
      <view class="content">
		<uv-image :src="baseUrl+item.menuImg" shape="square" height="50px" width="50px" radius="4px"></uv-image>
		<text style="color: black;font-weight: bolder">{{item.menuName}}</text>
        <text style="color:gray;">数量：{{item.quantity}} 份</text>
      </view>
      <view class="content1">
        <text>单价：{{item.price}} 元</text>
        <text style="font-weight: bold;color: black;">合计：{{item.total}} 元</text>
      </view>
      <view class="custom"  v-if="item.orderType == '2'">
        <text>客户：{{item.receiveName}}</text>
        <text>{{item.receivePhone}}</text>
      </view>
      <view class="address"  v-if="item.orderType == '2'">
        <text>地址：{{item.receiveAddress}}</text>
      </view>
    </view>
  </scroll-view>
  <uni-popup ref="alertDialog1" type="dialog">
    <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="接收"
                      title="是否接受?" content="" @confirm="dialogConfirm1"
                      @close="dialogClose"></uni-popup-dialog>
  </uni-popup>
  <uni-popup ref="alertDialog2" type="dialog">
    <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="派送"
                      title="是否派送?" content="" @confirm="dialogConfirm2"
                      @close="dialogClose"></uni-popup-dialog>
  </uni-popup>
</view>
</template>

<style scoped lang="scss">
.title{
  color: #566B4C;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right:  20px;
  font-weight: bold;
}
.content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right:  20px;
}
.content1{
  color: gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right:  20px;
  font-size: 14px;
}
.custom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: gray;
  margin-left: 20px;
  margin-right:  20px;
  font-size: 14px;
}
.address{
  color: gray;
  margin-left: 20px;
  margin-right:  20px;
  font-size: 14px;
}
.orderinfo{
  background-color: whitesmoke;
  width: 95%;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.receiveorder{
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center;
  background-color: #C9B9AA;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>